<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>获取数据</button>
    <ul id="list"></ul>

    <script>
        let btn = document.querySelector('button');
        let list = document.querySelector('#list');

        // 当期这次请求所获取到数据总条数
        let n = 0;

        btn.onclick = function() {
            getUsers();
        }

        function getUsers() {
            let xhr = new XMLHttpRequest()

            xhr.open('get', '/users?n=' + n)

            xhr.onload = function() {
                let data = JSON.parse(this.responseText)
                n = data.length;

                list.innerHTML = '';

                data.forEach(d => {
                    let li = document.createElement('li')
                    li.innerHTML = d.username
                    list.appendChild(li)
                })

                setTimeout(getUsers, 1000);
            }

            xhr.send();
        }
    </script>
</body>
</html>
